<template>
  <el-container>
    <el-header>
      <Header></Header>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <Aside></Aside>
      </el-aside>
      <el-main>
        <h3 style="text-align: center">编辑文章</h3>

        <el-form
          ref="form"
          :model="form"
          label-width="100px"
          style="width: 100%; margin: 0 auto"
        >
          <el-form-item label="分类">
            <el-select v-model="form.catid">
              <el-option :key="0" :value="0" label="请选择">请选择</el-option>
              <el-option
                :key="item.catid"
                :value="item.catid"
                :label="item.catname"
                v-for="item in category_select"
                >{{
                  "&nbsp;&nbsp;&nbsp;&nbsp;".repeat(item.lev) +
                  "┖─&nbsp;" +
                  item.catname
                }}</el-option
              >
            </el-select>
          </el-form-item>
          <el-form-item label="标题">
            <el-input type="text" v-model="form.title"></el-input>
          </el-form-item>

          <el-form-item label="内容">
            <TinymceEditor
              v-model="form.content"
              :init="$tinymce.config()"
            ></TinymceEditor>
          </el-form-item>

          <el-form-item label="缩略图">
            <el-upload
              class="avatar-uploader"
              :action="$config.axios_baseURL + '/api/upload/upload_image'"
              :show-file-list="false"
              :on-success="handleSuccess"
              :on-error="handleError"
              :headers="set_header()"
              :data="{ moduleid: '11', uniq: '12345' }"
            >
              <img v-if="form.thumb" :src="form.thumb" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <el-button type="danger" @click="handleRemove" size="small"
              >删除</el-button
            >
          </el-form-item>

          <el-form-item label="状态">
            <el-select v-model="form.flag">
              <el-option
                v-for="item in $core_enums('flag')"
                :key="item.key"
                :label="item.value"
                :value="item.key"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="onSubmit">提交</el-button>
          </el-form-item>
        </el-form>
      </el-main>
    </el-container>
    <el-footer>
      <Footer></Footer>
    </el-footer>
  </el-container>
</template>

<script>
import Cookies from "js-cookie";
export default {
  data() {
    return {
      form: {
        itemid: 0,
        catid: 0,
        title: "",
        content: "",
        thumb: "",
        flag: "1",
      },
      category_select: [],
    };
  },
  async mounted() {
    let data_category = await this.$axios.post("/api/article/category_lst");
    let itemid = parseInt(this.$route.query.itemid);
    let data_article = await this.$axios.post("/api/article/preview", {
      itemid: itemid,
    });
    let form = {};
    form.itemid = data_article.data.itemid;
    form.catid = data_article.data.catid;
    form.title = data_article.data.title;
    form.content = data_article.data.content;
    form.thumb = data_article.data.thumb;
    form.flag = String(data_article.data.flag);
    this.category_select = data_category.data;
    this.form = form;
  },
  methods: {
    set_header() {
      return {
        Authorization: JSON.stringify({
          auth: Cookies.get("auth"),
          userid: Cookies.get("userid"),
          username: Cookies.get("username"),
          groupid: Cookies.get("groupid"),
          rsa_token: this.$encryption(),
        }),
      };
    },
    handleSuccess(res, file) {
      this.form.thumb = res.data.url;
    },
    handleError(error, file) {
      console.log(error, file);
      this.$message.error(error.toString());
    },
    handleRemove() {
      this.form.thumb = "";
    },
    async onSubmit() {
      if (!this.form.catid) {
        this.$message({
          type: "error",
          message: "所属分类不能为空",
        });
        return;
      }
      if (!this.form.title) {
        this.$message({
          type: "error",
          message: "标题不能为空",
        });
        return;
      }
      if (!this.form.content) {
        this.$message({
          type: "error",
          message: "内容不能为空",
        });
        return;
      }
      if (!this.form.flag) {
        this.$message({
          type: "error",
          message: "状态不能为空",
        });
        return;
      }

      try {
        let data = await this.$axios.post("/api/article/mod", this.form);
        if (parseInt(data.code) > 0) {
          this.$message({
            message: data.msg,
            type: "success",
            duration: 1000,
          });
          setTimeout(() => {
            location.reload();
          }, 1000);
        } else {
          this.$message.error(data.msg);
        }
      } catch (error) {
        this.$message.error(error.toString());
      }
    },
  },
};
</script>

<style scoped>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
}

.el-main {
  color: #333;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  line-height: 150px;
  text-align: center;
}

.avatar {
  width: 150px;
  height: 150px;
  display: block;
}
</style>
